<template>
	<el-drawer title="知识文档详情" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed');">
		<el-container v-loading="loading">
			<el-main>
				<el-form :model="form" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
					<el-form-item label="知识标题" prop="title">{{ form.title }}</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="所属分类" prop="keywords">{{ form.sortName }}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="文件版本" prop="keywords">{{ form.version }}</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="关联关键词" prop="keywords">{{ form.keywords }}</el-form-item>
					<el-form-item label="知识摘要">
						<div v-html="form.content"></div>
					</el-form-item>
					<el-form-item label="相关附件" prop="attachId">
						<attach-menu :attachIds="form.attachId" :roleFlag="3" :preview="true"></attach-menu>
					</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="创建人" prop="keywords">{{ form.userName }}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="创建时间" prop="keywords">{{ form.createTime }}</el-form-item>
						</el-col>
					</el-row>
					<el-divider content-position="center">评论列表</el-divider>
					<div style="width: 100%;margin: 20px;" v-for="item in commentList" :key="item.knowledgeId">
						<el-avatar :src="item.avatar" size="small" style="margin-top: 5px;"></el-avatar>
						<div style="margin-left: 15px;display: inline-block;position: relative;top:-5px;">{{item.createUserName}}</div>
						<div style="float: right;display: inline-block;padding-right: 20px;">
								<div>
									<el-icon style="margin-right: 10px;"><el-icon-clock/></el-icon>{{item.createTime}}
								</div>
							</div>
						<div style="margin-top: 10px">
							{{item.remark}}
						</div>
					</div>


					<el-input v-model="resForm.remark" type="textarea" placeholder="发表您的评论" style="margin-bottom: 10px" maxlength="350"></el-input>
					<el-rate
						v-model="resForm.levelStar"
						disabled
						show-score
						text-color="#ff9900"
						score-template="{value}星">
					</el-rate>
				</el-form>
				<el-footer style="text-align: center;">
					<el-button @click="visible=false;">关闭</el-button>
					<el-button type="primary" :loading="isSaveing" @click="submit()">评 论</el-button>
				</el-footer>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'

export default {
	emits: ['success', 'closed'],
	components: {
		AttachMenu,
	},
	data() {
		return {
			loading: false,
			timer: null,// 初始定时器变量名为null
			commentList:[],
			resForm: {
				knowledgeId:"",
				commType: "0",
				remark: "",
				levelStar: 3
			},
			form: {
				knowledgeId: '',
				title: '',
				sortId: '',
				sortNo: '0',
				sortName: '',
				version: '',
				keywords: '',
				content: '',
				msgType: '',
				attachId: '',
				userName: '',
				createTime: '',
			},
			mode: "add",
			visible: false,
			isSaveing: false,
		}
	},
	mounted() {
	this.start();
	},
	methods: {
		start() {
			this.timer = setInterval(() => {
				this.setKnowledgeLearn({knowledgeId:this.form.knowledgeId});
			}, 10000);
		},
		end() {
			clearInterval(this.timer);
			this.timer = null // 这里最好清除一下，回归默认值
		},
		async getKnowledgeCommentList()
		{
			let res = await this.$API.file.knowledge.getKnowledgeCommentList.get({knowledgeId:this.form.knowledgeId});
			if(res.code==200)
			{
				this.commentList = res.data;
			}
		},
		async setKnowledgeLearn(params){
			await this.$API.file.knowledge.setKnowledgeLearn.post(params);
		},
		async submit(){
			this.isSaveing = true;
			let res = await this.$API.file.knowledge.insertKnowledgeComment.post(this.resForm);
			this.isSaveing = false;
			if (res.code == 200) {
				this.$emit('success')
				this.visible = false;
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
	//显示
	open(model) {
		this.model = model;
		this.visible = true;
		return this;
	},
	//表单注入数据
	setData(data) {
		this.form.knowledgeId = data.knowledgeId
		this.resForm.knowledgeId = data.knowledgeId
		this.form.title = data.title
		this.form.sortId = data.sortId
		this.form.sortNo = data.sortNo
		this.form.sortName = data.sortName
		this.form.version = data.version
		this.form.keywords = data.keywords
		this.form.content = data.content
		this.form.userName = data.userName
		this.form.createTime = data.createTime
		this.form.attachId = data.attachId
		this.getKnowledgeCommentList();
	},
},
	beforeUnmount() {
		clearInterval(this.timer);
	},
}
</script>

<style>
</style>
